---
import { getCollection, render } from "astro:content";
import BaseLayout from "@layouts/BaseLayout.astro";
import RelatedPostsCard from "@components/RelatedPostsCard.astro";
import FormattedDate from "@components/FormattedDate.astro";
import OptimizedCover from "@components/OptimizedPicture.astro";

export async function getStaticPaths() {
  const posts = await getCollection("posts");
  return posts.map((post) => ({
    params: { slug: post.id },
    props: post,
  }));
}

const post = Astro.props;
const { Content } = await render(post);
---

<BaseLayout title={post.data.title} description={post.data.description}>
  <main>
    <article class="prose mx-auto dark:prose-invert">
      <div class="prose-h1 text-center">
        <h1>{post.data.title}</h1>
      </div>
      <div>
        {
          post.data.cover && (
            <OptimizedCover src={post.data.cover} alt={post.data.coverAlt} />
          )
        }
      </div>
      <div>
        <Content />
      </div>
      <div class="flex gap-2 prose-a:no-underline">
        {
          post.data.tags.map((tag) => (
            <span class="badge badge-outline badge-md">
              <a href={`/tags/${tag}/1/`}>{tag}</a>
            </span>
          ))
        }
      </div>
      <div class="mt-4 flex justify-between">
        <small
          >Publish on <FormattedDate date={post.data.pubDate} />，Update on <FormattedDate
            date={new Date().toISOString()}
          /></small
        >
      </div>
    </article>
    <div class="mt-12">
      <RelatedPostsCard
        currentCategory={post.data.category[0]}
        currentSlug={post.id}
      />
    </div>
  </main>
</BaseLayout>
